<template>
  <!-- 月电量 -->
  <aside class="w1 tab-content">
    <Card title="月电量数据" :dis-hover="true" :bordered="false">
      <div slot="extra">
        <Button @click="handleOnOpen" type="primary" shape="circle" icon="ios-search">
        </Button>
      </div>
      <Drawer class="ivu-drawer-top" :title="companyInfo.name" width="300" v-model="visible" :mask="false">
        <SearchBar v-if="showSearch" :companyId="companyId" @change="handleChange" @download="handleDownload">
          <div slot="timeBar">
            <DatePicker :clearable="false" :options="timeOptions" class="time-picker" v-model="date" type="month" placeholder="请选择日期..." @on-change="handleTimeChange" />
          </div>
        </SearchBar>
      </Drawer>
      <div class="card-body">
        <Table border :columns="columns" :data="tableData" :loading="loading">
        </Table>
        <Page style="margin-top:16px;" :total="pageInfo.total" :page-size="20" @on-change="handlePageChange" :current="pageInfo.current" />
      </div>
    </Card>
  </aside>
</template>
<script>
import mixin from "./mixin"
import {
  powerDownload,
  getCompanyDetailByCompanyId,
  getRealPowerData
} from "@/api"
import SearchBar from "../SearchBar"
import Download from "@/utils/download"
import utils from "@/utils/utils"
export default {
  mixins: [mixin],
  components: { SearchBar },
  mounted() {
    this.fetchCompanyInfo()
    this.visible = true
    this.showSearch = true
  },
  beforeDestroy() {
    this.visible = false
  },
  data() {
    const vm = this
    return {
      date: new Date(),
      loading: false,
      columns: [
        {
          title: "分路名称",
          align: "center",
          key: "deviceName",
          render(h, params) {
            const {
              row: { deviceName, deviceNo }
            } = params
            return h(
              "button",
              {
                class: {
                  "link-button": true
                },
                style: {
                  color: "#515a6e"
                },
                on: {
                  click: () => {
                    const time = vm.moment(vm.searchData.date).valueOf()

                    vm.$router.push(
                      `/analysis/monthly/power/${deviceNo}/${deviceName}/${time}`
                    )
                  }
                }
              },
              deviceName
            )
          }
        },
        {
          align: "center",
          renderHeader: (h, params) => {
            return h(
              "span",
              `正向有功(kWh) ${vm.moment(this.date).format("YYYY-MM")}`
            )
          },
          children: [
            {
              title: "总",
              align: "center",
              key: "total"
            },
            {
              title: "峰",
              align: "center",
              key: "feng"
            },
            {
              title: "平",
              align: "center",
              key: "ping"
            },
            {
              title: "谷",
              align: "center",
              key: "gu"
            },
            {
              title: "尖",
              align: "center",
              key: "jian"
            }
          ]
        }
      ],
      tableData: [],
      companyInfo: { name: "设备列表" },
      visible: false,
      pageInfo: { total: 0, current: 1 },
      searchData: {}
    }
  },

  methods: {
    initData() {
      const vm = this
      vm.loading = true
      const data = { ...vm.searchData }
      const params = {
        companyId: vm.companyId,
        groupId: data.groupId,
        deviceNo: data.deviceNo,
        page: vm.pageInfo.current,
        date: data.date
      }
      getRealPowerData(params).then(res => {
        if (res.code === 200 && res.data) {
          vm.tableData = res.data.list
          vm.pageInfo.total = res.data.total
        } else {
          vm.tableData = []
          vm.pageInfo.total = 0
        }
        vm.loading = false
      })
    },

    handleTimeChange(time) {
      this.pageInfo.current = 1
      const _searchData = this.searchData
      _searchData["date"] = time
      this.searchData = _searchData
      this.initData()
    },

    handleChange(value) {
      const vm = this
      vm.pageInfo.current = 1
      const date = vm.moment(vm.date).format("YYYY-MM")
      this.searchData = value
      this.searchData.date = date
      this.initData()
    },

    handlePageChange(index) {
      this.pageInfo.current = index
      this.initData()
    },

    handleDownload() {
      const vm = this
      const searchData = utils.filterBlankValue(vm.searchData)
      const params = { ...searchData }
      const url = powerDownload(params)
      const download = new Download(url)
      vm.$Notice.open({
        title: "下载提示",
        desc: "文件正在下载，请至下载查看进度"
      })
      download.destory()
    },

    async fetchCompanyInfo() {
      const vm = this
      const companyId = vm.companyId
      const { data } = await getCompanyDetailByCompanyId(companyId)
      if (data) {
        this.companyInfo = data
      }
    },

    handleOnOpen() {
      this.visible = true
    }
  }
}
</script>
